<!DOCTYPE html>
<html>

<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="static/easyui/themes/icon.css" rel="stylesheet" />
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="static/vue/vue.js"></script>
    <link rel="stylesheet" href="static/elementUI/index.css">
    <script type="text/javascript" src="static/elementUI/index.js"></script>

    <script type="text/javascript" src="static/util.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <el-input v-model="keyword" style="width: 200px"></el-input>
            <el-button type="primary" @click="querySong(false)">查询</el-button>
        </div>
        <el-table :data="songList" stripe border  height="500" @sort-change="">
            <el-table-column prop="name" label="歌名" :sortable="'custom'"></el-table-column>
            <el-table-column prop="author" label="作者"></el-table-column>
            <el-table-column prop="language" label="地区"></el-table-column>
            <el-table-column prop="fileType" label="文件格式"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="update(scope.row.id)">更新</el-button>
                    <el-button type="text" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页栏 -->
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize"
            :page-sizes="[5,10,20]" :current-page="currentPage" @current-change="changeCurrent" @size-change="changeSize"
            align="center" style="margin-top: 10px;"></el-pagination>
    </div>
    <script>
        var app = new Vue({
            el: '#app',		//指定一个标签作为vue的挂载点（作用范围），使用css选择器选择
            data: {			//vue中使用的数据
                songList: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                keyword: ""
            },
            methods: {
                querySong(hasPage) {
                    console.log(hasPage);
                    var _this = this;
                    var body = {
                            "keyword": _this.keyword,
                            "pageNum": _this.currentPage,
                            "pageSize": _this.pageSize
                        };
                    if(!hasPage) {
                        _this.currentPage = 1;
                    }
                    $.ajax({
                        url: "/home/song/query",
                        type: "post",
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify(body),
                        success: function (response) {
                            _this.songList = response.records;
                            _this.total = response.total;
                        }
                    })
                },
                // 改变当前的页码
                changeCurrent(currentPage) {
                    this.currentPage = currentPage;
                    this.querySong();
                },
                // 改变当前的显示条数
                changeSize(pageSize) {
                    this.pageSize = pageSize;
                    this.querySong();
                },
                sortChange(column) {
                    
                }
            },
            mounted() {
                this.querySong();
            }
        })
    </script>
</body>

</html>